<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="box1">
        <b>加粗</b>
    </div>
    <div id="box2">
        <em>倾斜</em>
    </div>
    <input type="text" id="txt">
    <input type="button" value="按钮" id="btn">
</body>
<script>
    // id选择器
    var box1 = document.getElementById("box1")
    var box2 = document.getElementById("box2")
    var txt = document.getElementById("txt")
    var btn = document.getElementById("btn")

    // 内容类属性
    console.log(box1.innerHTML);
    console.log(typeof box1.innerHTML);
    box1.innerHTML = "<mark>hello</mark>";
    
    console.log(box2.innerText);
    console.log(typeof box2.innerText);
    box2.innerText = "<mark>hello</mark>";
    
    console.log(txt.value);
    console.log(typeof txt.value);
    // txt.value = "<mark>hello world</mark>"
    
    console.log(btn.value);
    console.log(typeof btn.value);
    btn.value = "<em>成功</em>"
    
    // 行为类属性

    box1.onclick = function(){
        console.log("点我干啥")
    }

    btn.onclick = function(){
        // console.log("我高兴")
        // 触发事件时，再去获取输入框的内容
        var t = txt.value;
        console.log(t);
        console.log(typeof t);
    }

</script>
</html>